<template>
<div class="system-log">
     <div class="search-box">
         <el-input placeholder="用户名或真实姓名" @keyup.enter="search" v-model="keywords" suffix-icon="el-icon-search" ></el-input>
     </div>
     <div class="log-content">
         <el-table :data="tableData">
             <el-table-column
             v-for="item in columnArray"
             :key="item.label"
             :prop="item.key"
             :label="item.label"
             align="center"
             ></el-table-column>
         </el-table>
         <div class="box-pagenation">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
        </div>
     </div>
</div>
</template>

<script>
export default {
    name: 'log',
    data () {
        return {
            keywords: '',
            currentPage: 1,
            pageSize: 10,
            total: 10,
            tableData: [
                {
                    id: '你好'
                }
            ],
            columnArray: [
                {
                    key: 'id',
                    label: 'ID'
                },
                {
                    key: 'id',
                    label: '真实姓名'
                },
                {
                    key: 'id',
                    label: '用户名'
                },
                {
                    key: 'id',
                    label: '操作'
                },
                {
                    key: 'id',
                    label: '操作时间'
                },
                {
                    key: 'id',
                    label: 'ip地址'
                },
                {
                    key: 'id',
                    label: '登录地点'
                }
            ]
        }
    },
    methods: {
        search () {

        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.$emit('flash')
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.$emit('flash')
        }
    }
}
</script>

<style lang="less">
.system-log {
    .search-box {
        padding: 20px 0;
        .el-input{
            width: 260px;
        }
    }
}
</style>
